<template>
  <div class="container">
    <div class="sidebar">
      <ul>
        <li 
          @click="activeComponent = 'ResearchReport'" 
          :class="{ active: activeComponent === 'ResearchReport' }"
        >研究报告</li>
        <li 
          @click="activeComponent = 'DemographicAnalysis'" 
          :class="{ active: activeComponent === 'DemographicAnalysis' }"
        >人口统计分析</li>
        <li 
          @click="activeComponent = 'SocialMedia'" 
          :class="{ active: activeComponent === 'SocialMedia' }"
        >社交媒体分析</li>
        <li 
          @click="activeComponent = 'CorrelationHeatmap'" 
          :class="{ active: activeComponent === 'CorrelationHeatmap' }"
        >相关性热图</li>
        <li 
          @click="activeComponent = 'AddictedAndSocial'" 
          :class="{ active: activeComponent === 'AddictedAndSocial' }"
        >上瘾与社交冲突</li>
      </ul>
    </div>

    <div class="content">
      <component :is="activeComponent" />
    </div>
  </div>
</template>

<script>
import ResearchReport from './components/ResearchReport.vue';
import DemographicAnalysis from './components/DemographicAnalysis.vue';
import SocialMedia from './components/SocialMedia.vue';
import CorrelationHeatmap from './components/CorrelationHeatmap.vue';
import AddictedAndSocial from './components/AddictedAndSocial.vue';

export default {
  name: 'App',
  components: {
    ResearchReport,
    DemographicAnalysis,
    SocialMedia,
    CorrelationHeatmap,
    AddictedAndSocial,
  },
  data() {
    return {
      activeComponent: 'ResearchReport', // 默认显示的组件
    };
  }
}
</script>

<style scoped>

.container {
  display: flex; 
  height: 100vh;  
  background-color: rgb(245, 245, 245);
}
.sidebar {
  width: 250px;
  background-color: #ffffff;
  padding: 20px;
  box-sizing: border-box;
}

.sidebar ul {
  list-style-type: none;
  padding: 0;
}

.sidebar li {
  background-color: rgb(255, 255, 255);
  border-radius: 15px;
  height: 50px;
  display: flex;               
  justify-content: center; 
  align-items: center;
}
.sidebar li:hover {
  background-color: rgb(239, 239, 239); 
  box-shadow: 1 3px 25px rgba(0, 0, 0, 0.1);
   cursor: pointer;
}

.content {
  flex: 1; 
  padding: 20px;
  box-sizing: border-box;
  overflow-y: auto; 

}
.content::-webkit-scrollbar {
  display: none;
  /* 隐藏滚动条 */
}
.sidebar li.active {
  background-color: #4a90e2;
  color: white; 
}
</style>
